/**
 * 竖立文本标签图元
 * @class
 * @extends graphic.div.BaseDiv
 */
import BaseDiv from "./BaseDiv.js";

class DivUpLabel extends BaseDiv {
  /**
   * 水平对齐方式
   * @type {Cesium.HorizontalOrigin}
   * @private
   */
  _horizontalOrigin = Cesium.HorizontalOrigin.CENTER;

  /**
   * 垂直对齐方式
   * @type {Cesium.VerticalOrigin}
   * @private
   */
  _verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

  /**
   * 构造函数
   * @param {Object} options 配置参数
   * @param {Array.<Number>} [options.position=[111, 28, 0]] 可选 经纬度[x,y,z]
   * @param {String} [options.content] 可选 文本
   * @param {Object} [options.style={}] 可选 样式信息
   * @param {String} [options.style.color='white'] 可选 颜色
   * @param {String|Number} [options.style.fontSize=16] 可选 字体大小
   * @param {String|Number} [options.style.lineHeight=100] 可选 线高度
   * @param {Cesium.DistanceDisplayCondition|Object} [options.style.distanceDisplayCondition={ near: 0.1, far: 1000000}] 可选 可视范围
   * @param {Boolean} [options.style.pointerEvents=true] 可选 DIV是否可以鼠标交互,为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件
   * @param {Boolean} [options.style.userSelect=false] 可选 是否可以选中文本
   */
  constructor(options = {}) {
    // 初始化默认样式
    const defaultStyle = {
      color: "white",
      fontSize: 16,
      lineHeight: 100,
      distanceDisplayCondition: { near: 0.1, far: 1000000 },
      pointerEvents: true,
      userSelect: false,
    };

    // 合并样式
    const mergedOptions = {
      ...options,
      style: { ...defaultStyle, ...(options.style || {}) },
    };

    super(mergedOptions);

    // 初始化内容
    this._content = options.content || "";

    // 更新标签样式
    this._updateLabelStyle();
  }

  /**
   * 获取图元所属分类
   * @readonly
   * @type {String}
   */
  get graphicClassType() {
    return "DIV";
  }

  /**
   * 获取图元类型
   * @readonly
   * @type {String}
   */
  get graphicType() {
    return "DIV_UP_LABEL";
  }

  /**
   * 获取图元类型名称
   * @readonly
   * @type {String}
   */
  get typeName() {
    return "DivUpLabel";
  }

  /**
   * 获取或设置文本内容
   * @type {String}
   */
  get content() {
    return this._content;
  }

  set content(value) {
    this._content = value;
    this._updateLabelStyle();
  }

  /**
   * 创建 DOM 元素
   * @private
   * @returns {HTMLElement}
   */
  _createDomElement() {
    const div = super._createDomElement();

    // 添加特定的CSS类
    div.className = "cesium-extensions-div-up-label cesium-extensions-div-base";

    return div;
  }

  /**
   * 更新标签样式
   * @private
   */
  _updateLabelStyle() {
    if (!this._domEle) return;

    // 清空现有内容
    this._domEle.innerHTML = "";

    // 创建文本元素
    const textDiv = document.createElement("div");
    textDiv.className = "cesium-extensions-div-up-label-text";
    textDiv.textContent = this._content;

    // 创建线条元素
    const lineDiv = document.createElement("div");
    lineDiv.className = "cesium-extensions-div-up-label-line";

    // 创建圆点元素
    const dotDiv = document.createElement("div");
    dotDiv.className = "cesium-extensions-div-up-label-dot";

    // 组装DOM结构
    this._domEle.appendChild(textDiv);
    this._domEle.appendChild(lineDiv);
    this._domEle.appendChild(dotDiv);

    // 设置CSS变量来控制动态样式
    this._setCssVariables();

    // 更新基础DOM样式
    this._updateDomStyle();
  }

  /**
   * 设置CSS变量控制动态样式
   * @private
   */
  _setCssVariables() {
    if (!this._domEle) return;

    // 设置颜色变量
    if (this._style.color) {
      this._domEle.style.setProperty("--text-color", this._style.color);
      this._domEle.style.setProperty("--line-color", this._style.color);
      this._domEle.style.setProperty("--dot-color", this._style.color);
    }

    // 设置字体大小变量
    if (this._style.fontSize) {
      const fontSize =
        typeof this._style.fontSize === "number"
          ? `${this._style.fontSize}px`
          : this._style.fontSize;
      this._domEle.style.setProperty("--font-size", fontSize);
    }

    // 设置线高度变量
    if (this._style.lineHeight) {
      const lineHeight =
        typeof this._style.lineHeight === "number"
          ? `${this._style.lineHeight}px`
          : this._style.lineHeight;
      this._domEle.style.setProperty("--line-height", lineHeight);
    }
  }

  /**
   * 更新DOM样式
   * @private
   * @param {HTMLElement} [element] 要更新样式的元素，如果不提供则使用this._domEle
   */
  _updateDomStyle(element = this._domEle) {
    if (!element) return;

    // 应用交互相关样式
    if (this._style.pointerEvents === false) {
      element.classList.add("cesium-extensions-div-no-pointer");
    } else {
      element.classList.remove("cesium-extensions-div-no-pointer");
    }

    if (this._style.userSelect) {
      element.classList.add("cesium-extensions-div-selectable");
    } else {
      element.classList.remove("cesium-extensions-div-selectable");
    }

    // 设置显示状态
    if (this.show) {
      element.classList.remove("cesium-extensions-div-hidden");
    } else {
      element.classList.add("cesium-extensions-div-hidden");
    }
  }

  /**
   * 销毁对象
   */
  destroy() {
    if (this.isDestroyed()) return;

    // 清理DOM元素
    if (this._domEle && this._domEle.parentNode) {
      this._domEle.parentNode.removeChild(this._domEle);
    }
    this._domEle = null;

    // 清理数据
    this._content = null;

    // 调用父类销毁方法
    super.destroy();
  }
}

export default DivUpLabel;
